<template>
    <el-form :inline="true">
        <el-form-item>
            <el-input v-model="searchForm.departmentName" placeholder="部门名称" prefix-icon="el-icon-search" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="getDepartmentList()">搜索</el-button>
        </el-form-item>
        <el-form-item v-if="hasAuth('department:save')">
            <el-button @click="dialogVisible = true" type="primary" >新增</el-button>
        </el-form-item>
        <el-form-item v-if="hasAuth('department:delete')">
            <el-popconfirm title="这是确定批量删除吗？" @confirm="delHandle(null)">
                <template #reference>
                    <el-button type="danger" slot="reference" :disabled="delBtlStatu">批量删除</el-button>
                </template>
            </el-popconfirm>
        </el-form-item>
    </el-form>

    <!--这里是表格-->
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 99%"
            sroll
            border
            stripe
            @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="部门名称" width="120" sortable></el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column prop="children" label="部门拥有的的岗位" width="250">
            <template #default="scope">
                <el-tag effect="plain" size="small" :type="elTagTypeArr[index % 5]" v-for="(item,index) in scope.row.children">{{ item.name}}</el-tag>
            </template>
        </el-table-column>
        <!--这里是操作栏-->
        <el-table-column label="操作" width="200" v-if="hasAuth('department:update') || hasAuth('department:delete')">
            <template #default="scope">

                <el-button @click="editHandle(scope.row)" type="text"  v-if="hasAuth('department:update')">编辑</el-button>
                <el-divider direction="vertical"  v-if="hasAuth('department:update')"></el-divider>

                <el-popconfirm title="确定要删除这条记录吗？" @confirm="delHandle(scope.row.id)"  v-if="hasAuth('department:delete')">
                    <template #reference>
                        <el-button type="text">删除</el-button>
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>
    </el-table>

    <!--新增、编辑对话框-->
    <el-dialog title="部门信息"
               v-model="dialogVisible"
               width="600px"
               @close="resetForm('editForm')">
        <el-form :model="editForm" ref="editForm" :rules="editFormRules" label-width="100px">
            <el-form-item label="部门名称" prop="name">
                <el-input
                        type="text"
                        placeholder="请输入部门名称"
                        v-model="editForm.name"
                        maxlength="10"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
                <el-input
                        type="textarea"
                        autosize
                        placeholder="请输入部门的简述"
                        v-model="editForm.remark"
                        maxlength="100"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
        </span>
        </template>
    </el-dialog>

    <!--分页组件-->
    <div style="float: right;margin-top: 22px;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'partment',
        data() {
            return {
                searchForm: {},

                // 根据多选的数量，将其批量按钮可用/不可用进行变化
                multipleSelection: [],
                delBtlStatu: true,

                tableData: [],
                // 用于显示多种类型，花里胡哨的标签
                elTagTypeArr: ["success","","info","warning","danger"],

                // 分页用到的属性
                total: 0,
                current: 1,
                size: 10,

                // 对部门信息进行添加，编辑用到的对话框和对应的v-model绑定的数据和表单验证规则
                dialogVisible: false,
                editForm: {},
                editFormRules: {
                    name: {required: true, message: '请输入部门名称', trigger: 'blur'}
                },
            }
        },


        methods: {
            getDepartmentList(){
                this.$axios.get('/department/list', {
                    params: {
                        departmentName: this.searchForm.departmentName,
                        current: this.current,
                        size: this.size
                    }
                }).then(res => {
                    this.tableData = res.data.data.records
                    this.current = res.data.data.current
                    this.size = res.data.data.size
                    this.total = res.data.data.total
                })
            },

            //点击编辑的事件，用于数据回显
            editHandle(row) {
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.editForm = JSON.parse(JSON.stringify(row))
                })
            },
            // 新增、编辑表单提交
            submitEditForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/department/' + (this.editForm.id?'update' : 'save'), this.editForm)
                            .then(res => {
                                this.$message({
                                    showClose: true,
                                    message: '恭喜你，操作成功',
                                    type: 'success',
                                    onClose:() => {
                                        this.getDepartmentList()
                                    }
                                });
                                this.dialogVisible = false
                            })
                    } else {
                        console.log('error rule');
                        return false;
                    }
                })
            },


            // 触发事件为有复选框发生变化，会传递所有勾选的行数据对象数组
            handleSelectionChange(val) {
                this.multipleSelection = val;
                //设置批量删除的按钮的可用/不可用
                this.delBtlStatu = val.length == 0
            },
            //这里是删除功能
            delHandle(id) {
                var ids = []
                if (id) {
                    ids.push(id)
                } else {
                    this.multipleSelection.forEach(row => {
                        ids.push(row.id)
                    })
                }
                this.$axios.post("/department/delete", ids).then(res => {
                    this.$message({
                        showClose: true,
                        message: '恭喜你，操作成功',
                        type: 'success',
                        onClose:() => {
                            this.getDepartmentList()
                        }
                    });
                })
            },

            // 新增、编辑对话框公用一个，新增不会回显，所以需要对其清空表单中的内容，以免切换(新增/编辑)后数据还在
            resetForm(formName) {
                this.dialogVisible = false
                this.$refs[formName].resetFields();
                this.editForm = {}
            },

            //这里是分页
            handleSizeChange(val) {
                this.size = val
                this.getDepartmentList()
            },
            handleCurrentChange(val) {
                this.current = val
                this.getDepartmentList()
            },

        },

        created() {
            this.getDepartmentList()
        }
    }
</script>
<style scope>
    .el-tag{
        margin-right: 5px;
    }
</style>